<template>
  <a-layout>
    <a-layout-sider
      v-model:collapsed="collapsed"
      :trigger="null"
      collapsible
      :collapsedWidth="60"
    >
      <div class="logo" />
      <div
        style="
          margin: auto;
          margin-top: 30px;
          margin-bottom: 30px;
          width: 50px;
          border-radius: 50%;
        "
      >
        <img
          @click="clickAvatar"
          style="width: 100%; border-radius: 50%"
          :src="avatarURL"
          draggable="false"
          alt=""
        />
      </div>
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark">
        <a-menu-item
          @click="select(item)"
          v-for="item in routeArray"
          v-key="item.path"
          :key="item.path"
        >
          <div class="svg-main" v-html="item.icon"></div>
          <span>{{ item.name }}</span
          >-->
        </a-menu-item>

        <div class="setting" @click="openSetting">
          <svg
            t="1738077140994"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="14938"
            width="256"
            height="256"
          >
            <path
              d="M919.6 405.6l-57.2-8c-12.7-1.8-23-10.4-28-22.1-11.3-26.7-25.7-51.7-42.9-74.5-7.7-10.2-10-23.5-5.2-35.3l21.7-53.5c6.7-16.4 0.2-35.3-15.2-44.1L669.1 96.6c-15.4-8.9-34.9-5.1-45.8 8.9l-35.4 45.3c-7.9 10.2-20.7 14.9-33.5 13.3-14-1.8-28.3-2.8-42.8-2.8-14.5 0-28.8 1-42.8 2.8-12.8 1.6-25.6-3.1-33.5-13.3l-35.4-45.3c-10.9-14-30.4-17.8-45.8-8.9L230.4 168c-15.4 8.9-21.8 27.7-15.2 44.1l21.7 53.5c4.8 11.9 2.5 25.1-5.2 35.3-17.2 22.8-31.7 47.8-42.9 74.5-5 11.8-15.3 20.4-28 22.1l-57.2 8C86 408 72.9 423 72.9 440.8v142.9c0 17.7 13.1 32.7 30.6 35.2l57.2 8c12.7 1.8 23 10.4 28 22.1 11.3 26.7 25.7 51.7 42.9 74.5 7.7 10.2 10 23.5 5.2 35.3l-21.7 53.5c-6.7 16.4-0.2 35.3 15.2 44.1L354 927.8c15.4 8.9 34.9 5.1 45.8-8.9l35.4-45.3c7.9-10.2 20.7-14.9 33.5-13.3 14 1.8 28.3 2.8 42.8 2.8 14.5 0 28.8-1 42.8-2.8 12.8-1.6 25.6 3.1 33.5 13.3l35.4 45.3c10.9 14 30.4 17.8 45.8 8.9l123.7-71.4c15.4-8.9 21.8-27.7 15.2-44.1l-21.7-53.5c-4.8-11.8-2.5-25.1 5.2-35.3 17.2-22.8 31.7-47.8 42.9-74.5 5-11.8 15.3-20.4 28-22.1l57.2-8c17.6-2.5 30.6-17.5 30.6-35.2V440.8c0.2-17.8-12.9-32.8-30.5-35.2z m-408 245.5c-76.7 0-138.9-62.2-138.9-138.9s62.2-138.9 138.9-138.9 138.9 62.2 138.9 138.9-62.2 138.9-138.9 138.9z"
              fill="#bfbfbf"
              p-id="14939"
            ></path>
          </svg>
        </div>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-content><router-view></router-view></a-layout-content>
    </a-layout>
    <setting></setting>
  </a-layout>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { Layout as ALayout } from "ant-design-vue";
import { LayoutSider as ALayoutSider } from "ant-design-vue";
import { LayoutContent as ALayoutContent } from "ant-design-vue";
// import { MenuItem } from "ant-design-vue";
import { Menu as AMenu, MenuItem as AMenuItem } from "ant-design-vue";
import setting from "../setting/index.vue";
const collapsed = ref(true);
import router, { routeArray } from "../../router";
import { useMainStore } from "../../store";
const mainStore = useMainStore();

const clickAvatar = () => {
  console.log("此刻点击了头像");
};

console.log(routeArray);
// 定义路由项的接口
interface RouteItem {
  path: string;
  name: string;
  icon: string;
}

const openSetting = () => {
  mainStore.changeSettingStatus(true);
  console.log("🚀 ~ openSetting ~ mainStore:", mainStore.settingStatus);
};
const selectedKeys = ref([`${routeArray[0].path}`]);
// const avatarURL = "../../img/login/avatar.jpg";
// import avatarURL from "../../img/login/avatar.jpg";
const avatarURL = new URL("../../img/login/avatar.jpg", import.meta.url).href;
// const avatarURL = import("../../img/login/avatar.jpg");
const select = (item: RouteItem) => {
  console.log(item);
  router.push(item.path);
};
</script>
<style lang="scss">
.icon {
  width: 50px;
}
:where(.css-dev-only-do-not-override-3m4nqy).ant-menu-dark:not(
    .ant-menu-horizontal
  )
  .ant-menu-item:not(.ant-menu-item-selected):active {
  background-color: rgba(139, 141, 142, 0.32); /* 你想要的背景颜色 */
}

#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #134472;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
}

.site-layout .site-layout-background {
  background: #fff;
}
.ant-layout {
  height: 100%;
}
.ant-layout-sider {
  background-color: var(--background-color) !important;
  color: var(--text-color);
}
.ant-menu-dark {
  background-color: var(--background-color) !important;
  color: var(--text-color) !important;
}
.ant-menu-title-content {
  transition: color 0.01s !important;
}
.ant-menu-item:hover {
  background-color: var(--background-hover-color) !important;
}
.ant-menu-item-selected {
  background-color: var(--background-hover-color) !important;
}
/* 隐藏 Tooltip */
.ant-tooltip {
  display: none !important;
}
.ant-layout {
  background-color: var(--background-color) !important;
  padding: 0 !important;
}
.ant-layout-content {
  background-color: var(--background-color) !important;
  box-shadow: rgba(137, 138, 139, 0.12) 0px -3px 3px 0px,
    rgba(139, 141, 142, 0.32) 0px 2px 2px 0px;
  padding: 5px !important;
  margin: 10px !important;
}
.svg-main {
  width: 50px !important;
  svg {
    width: 16px;
    height: 16px;
  }
}
.setting {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 10px;
  > svg {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
}
</style>
